<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台登录</title>
		<link rel="stylesheet" href="css/new.css" />
		<script type="text/javascript" src="js/jQuerynew.js" ></script>
		<script type="text/javascript" src="js/bootstrapnew.min.js" ></script>
		<style type="text/css">
.htLogin-wrapper{
	height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.LoginBox{
	
    width: 350px;
    box-shadow: none;
    position: absolute;
    top: 40%;
    left: 50%;
    background-color: rgba(0,0,0,0);
    transform: translate(-50%, -50%);
    z-index: 2;
}
.form-group {
    margin-bottom: 15px;
}

.text-center {
    text-align: center;
}
#htVerify{
	width: 199px;
	height: 50px;
}
#canvas{
	height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
		</style>
	</head>
	<body>
		<div class="htLogin-wrapper">
		  		<div class="LoginBox">
		  			<form action="#" method="post">
		  				<div class="form-group text-center">
					<h2 style="color:#fff"><strong>VMALL后台管理</strong></h2>
				</div>
				<div class="input-group input-group-lg">
					<span class="input-group-addon glyphicon glyphicon-user"></span>
					<input type="text" class="form-control" placeholder="用户名" />
				</div>
				<br />
				<div class="input-group input-group-lg">
					<span class="input-group-addon glyphicon glyphicon-pencil"></span>
					<input type="password" class="form-control" placeholder="密码" />
				</div>
				<br />
				<div class="input-group input-group-lg">
					<span class="input-group-addon glyphicon glyphicon-pushpin"></span>
					<input type="text" class="form-control" id="htVerify" placeholder="验证码" /><img src="img/gzh/1535528012396.png"/>
				</div>
				<br />
				<button type="submit" class="btn btn-block btn-primary"style="height: 50px;">登录</button>
		  			</form>
		  		</div>
		<!--黑客帝国背景效果-->
		  <canvas id="canvas">
		  </canvas>
    <style type="text/css">
		body{margin: 0; padding: 0; overflow: hidden;}
</style>
<script type="text/javascript">
	    var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        var texts = '0123456789'.split('');
        var fontSize = 16;
        var columns = canvas.width/fontSize;
        // ���ڼ����������ʱ��꣬���Գ��ȼ�Ϊ����
        var drops = [];
        //��ʼֵ
        for(var x = 0; x < columns; x++){
            drops[x] = 1;
        }
        function draw(){
            //�ñ�������͸������͸��
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //������ɫ
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px arial';
            //�����������
            for(var i = 0; i < drops.length; i++){
                var text = texts[Math.floor(Math.random()*texts.length)];
                ctx.fillText(text, i*fontSize, drops[i]*fontSize);
                if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }
        setInterval(draw, 33);
        </script>
       </div>
	</body>
</html>
